<template>
  <view class="redempt-container">
    <view class="search-bar">
      <input class="search-input" v-model="ticketCode" placeholder="请输入核销码" input-align="center" />
      <button class="search-button" @click="getRedemptInfo">查询</button>
    </view>
    <view class="order-content" v-if="orderId">
      <view class="order-item">
        <view class="order-title">{{ formData.ebMerActivityTicketName }}</view>
        <view class="order-info u-flex">
          <image class="order-icon" :src="imgurl + formData.ebMerActivityIcon" />
          <view class="info-detail" @click="getDetail">
            <view class="info-name">
              <p class="order-name">{{ formData.ebMerActivityName }}</p>
              <p>{{ formData.ebMerName }}</p>
            </view>
            <view class="info-quantity-price u-flex u-row-between">
              <view class="info-quantity"
                >数量<span class="u-m-l-10">X{{ formData.totalNum }}</span></view
              >
              <view class="info-price">
                实付<span class="price-text">￥{{ Number(formData.payPrice).toFixed(2) }}</span>
                <span class="arrow-icon">↓</span>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- <view class="order-item">
        <view class="order-title">详情信息</view>
        <view class="product-list" v-for="(item, index) in productLists" :key="index">
          <view class="product-info u-flex">
            <view class="product-name">
              <view class="product-name-text">{{ item.name }}</view>
              <view class="product-unit">({{ item.unmber }}瓶)</view>
            </view>
            <view class="product-price">￥{{ item.price }}</view>
          </view>
        </view>
      </view> -->
      <orderInfo :isPayTime="true" :formData="formData" />
    </view>
    <view class="footer">
      <button class="submit-button" @click="onSubmit" :disabled="!orderStatus" :loading="loading">
        {{ !orderId || orderStatus ? '确认核销' : '已核销' }}
      </button>
    </view>
    <priceDetail ref="priceDetail" :orderId="orderId" />
  </view>
</template>

<script>
import priceDetail from './components/price_detail.vue';
import orderInfo from './components/order_info.vue';
import { orderVerification, orderInfoByticketCode } from '../../utils/merorder/mer';
import {IMG_URL} from '../../config/index.js'
export default {
  components: {
    priceDetail,
    orderInfo
  },
  computed: {
    orderStatus() {
      return this.formData.refundStatus === 0 && this.formData.status === 1;
    }
  },
  data() {
    return {
      ticketCode: '',
      imgurl: IMG_URL,
      loading: false,
      formData: { ebMerActivityTicketName: '' },
      productLists: [],
      orderId: '',
      userinfo: uni.getStorageSync('userInfo'),
      userInfoToken:uni.getStorageSync("userInfoToken"),
    };
  },
  onLoad(option) {
    this.ticketCode = option.ticketCode || '';
    if (this.ticketCode) {
      this.getRedemptInfo();
    }
  },
  methods: {
    getRedemptInfo() {
      if (!this.ticketCode) {
        this.$toast('请输入核销码');
        return;
      }
      orderInfoByticketCode({
        ticketCode: this.ticketCode,
        ebMerId: this.userinfo.merId
      })
        .then((res) => {
          if (res.code === 200) {
            this.orderId = res.data.orderNo;
            this.formData = {
              ...res.data,
              orderId: res.data.orderNo,
              createTime: res.data.orderTime
            };
            this.productLists = res.data.ebMerActivityTicketProductList || [];
            this.$nextTick(() => {
              this.$refs.priceDetail.orderInfo();
            });
          } else {
            this.orderId = '';
          }
        })
        .catch(() => {
          this.orderId = '';
        });
    },
    getDetail() {
      this.$refs.priceDetail.handleOpen();
    },
    onSubmit() {
      this.loading = true;
      orderVerification({
        ticketCode: this.ticketCode,
        userId: this.userInfoToken.id
      })
        .then((res) => {
          uni.showToast({
            title: '核销成功',
            icon: 'none'
          });
          this.loading = false;
          uni.redirectTo({
            url: '/pages_sh/orderCode/redempt_list'
          });
        })
        .catch(() => {
          uni.showToast({
            title: '核销失败',
            icon: 'none'
          });
          this.loading = false;
        });
    }
  }
};
</script>

<style scoped>
.redempt-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding: 20px;
}

.search-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 20rpx;
  outline: none;
}

.search-button {
  width: 80px;
  background-color: #2979ff;
  color: white;
  border: none;
  border-radius: 20rpx;
  cursor: pointer;
}

.order-content {
  padding-bottom: 80px;
}

.order-item {
  background-color: #ffffff;
  margin-top: 15px;
  padding: 10px;
  border-radius: 5px;
}

.order-title {
  font-size: 16px;
  margin-bottom: 5px;
}

.order-icon {
  width: 60px;
  height: 60px;
  border-radius: 5px;
  margin-right: 10px;
}

.info-detail {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

.info-name {
  display: flex;
  flex-direction: column;
}

.order-name {
  font-size: 16px;
}

.info-quantity-price {
  margin-top: 5px;
}

.info-quantity {
  font-size: 14px;
}

.info-price {
  font-size: 14px;
  font-weight: bold;
  color: #ff0000;
}

.price-text {
  font-weight: bold;
}

.product-list {
  margin-top: 10px;
}

.product-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product-name {
  display: flex;
  align-items: flex-start;
}

.product-name-text {
  font-size: 14px;
}

.product-unit {
  font-size: 12px;
  margin-left: 5px;
}

.product-price {
  font-size: 14px;
  color: #ff0000;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  padding: 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.submit-button {
  width: 100%;
  font-weight: bold;
  background-color: #2979ff;
  color: white;
  border: none;
  border-radius: 20px;
  cursor: pointer;
}

.arrow-icon {
  margin-left: 5px;
  font-size: 12px;
}

.u-m-l-10 {
  margin-left: 10px;
}

.u-m-r-10 {
  margin-right: 10px;
}

.u-m-t-10 {
  margin-top: 10px;
}

.u-m-b-10 {
  margin-bottom: 10px;
}

.u-flex {
  display: flex;
}

.u-row-between {
  justify-content: space-between;
}

.u-col-center {
  align-items: center;
}

.u-font-16 {
  font-size: 16px;
}

.u-font-14 {
  font-size: 14px;
}

.u-font-12 {
  font-size: 12px;
}

.u-font-weight-bold {
  font-weight: bold;
}

.u-type-error {
  color: #ff0000;
}

.u-text-bold {
  font-weight: bold;
}

.u-text-right {
  text-align: right;
}

.u-p-t-30 {
  padding-top: 30px;
}

.u-p-20 {
  padding: 10px;
}

.u-bg-white {
  background-color: #ffffff;
}

.u-w-100 {
  width: 100%;
}

.u-line-1 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.u-line-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
</style>
